<template>
	<view>
		<uni-section title="基础信息" type="line"></uni-section>
		<view style="width: 95%;margin: 0 auto;">
			<uni-forms style="margin: 10rpx auto;"
			ref="baseForm" 
			:rules="rules" 
			labelAlign="left" 
			:modelValue="reimbursementOrder">
				<uni-forms-item label-align="right" label="名称:" required name="title">
					<uni-easyinput v-model="reimbursementOrder.title" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label-align="right" label="备注:">
					<uni-easyinput v-model="reimbursementOrder.note" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item label-align="right" label="金额:" required name="cost">
					<uni-easyinput v-model="reimbursementOrder.cost" placeholder="0.00" />
				</uni-forms-item>
				<uni-forms-item label-align="right" label="发票收据:">
					<robby-image-upload v-model="reimbursementOrder.imageList" 
					@delete="deleteImage" 
					limit="3"
					@add="addImage"></robby-image-upload>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit" style="background-color: #007aff;">申请</button>
		</view>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		components: {robbyImageUpload},
		data() {
			return {
				isEdit: false,
				isClickUpload: false,
				imageList: [],
				fileList: [],
				images: [],
				delId: [],
				fileIds: [],
				team: [],
				user: [],
				reimbursementOrder: {
					id: '',
					teamId: '',
					title: '',
					note: '',
					cost: '',
					billImages: [],
					imageList: [],
				},
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				},
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					cost: {
						rules: [{
							required: true,
							errorMessage: '报销费用不能为空'
						},
						{
							format: 'number',
							errorMessage: '请输入数字'
						}]
					}
				},
				
			}
		},
		onLoad(ev){
			if(ev.teamId != null && ev.teamId != '') {
				this.getTeamById(ev.teamId);
			}
			if(ev.reimId != null && ev.reimId != '') {
				this.getReimbursement(ev.reimId);
			}
			var reim_data = this.$dry.get("reim_data");
			if(reim_data) {
				uni.removeStorageSync("reim_data");
				this.isEdit = true;
				this.reimbursementOrder = reim_data.reimbursement;
				this.reimbursementOrder.billImages = reim_data.reimbursement.billImages == '' || reim_data.reimbursement.billImages == 'undefined' ? [] : reim_data.reimbursement.billImages.split(",");
				if(reim_data.billImgList.length > 0) {
					var imgs = [];
					var imgurls = [];
					reim_data.billImgList.forEach (r => {
						imgurls.push(r.url);
						imgs.push({
							id: r.id,
							url: r.url
						})
					})
					this.reimbursementOrder.imageList = imgurls;
					this.images = imgs;
				}
			}
			this.user = this.$dry.get("user");
		},
		onShow(){
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			getTeamById(id){
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("getTeamById",token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							"id": id
						},
						success: data => {
							this.team = data.data;
						}
					})
				}
			},
			addImage(e){
				this.imageList = this.imageList.concat(e.paths);
				this.fileList = this.fileList.concat(e.files);
			},
			deleteImage(e){
				this.images.forEach(i => {
					if(i.url == e.currentImage){
						this.delId.push(i.id);
					}
				})
				for(let i = 0; i < this.imageList.length; i++){
					if(e.currentImage == this.imageList[i]){
						this.imageList.splice(i,1);
					}
				}
				for(let j = 0; j < this.fileList.length; j++){
					if(e.currentImage == this.fileList[j].path){
						this.fileList.splice(j,1);
					}
				}
			},
			addOrUpdate() {
				this.$refs['baseForm'].validate().then(async res => {
					var fileLists = [];
					if(this.fileList.length > 0) {
						fileLists = await this.$oss.saveImages(this.fileList);
					}
					var token = this.$dry.getToken();
					if(token){
						uni.showToast({
							title: "正在提交",
							icon: "loading",
							duration: 2000
						});
						setTimeout(() => {
							if(fileLists.length > 0) {
								this.isClickUpload = true;
								fileLists.forEach(file => {
									this.fileIds.push(file.id);
								})
							}
							this.reimbursementOrder.teamId = this.team.id;
							if(this.isEdit){
								this.reimbursementOrder.billImages = this.isClickUpload == true ? this.$dry.getImgIds(this.images,this.fileIds,this.delId).join(",") : this.reimbursementOrder.billImages;
							}
							else{
								this.reimbursementOrder.billImages = this.isClickUpload == true ? this.fileIds.join(",") : "";
							}
							if(this.isEdit) {
								this.$request.addOrEdit("updateReim",this.reimbursementOrder,token,true);
							} else {
								this.$request.addOrEdit("addReimbursement",this.reimbursementOrder,token,false);
							}
							uni.navigateBack({
								delta: 1
							})
						}, 2000);
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			submit() {
				var that = this;
				this.$refs['baseForm'].validate().then(res => {
					uni.showModal({
						title: "信息",
						content: "请确保申请信息无误，提交后将无法再修改",
						showCancel: true,
						confirmText: "确定",
						success: function (result) {
							if (result.confirm) {
								that.addOrUpdate();
							}
						}
					})
				})
			}
		}
	}
</script>

<style>

</style>
